import React, { useState } from 'react';
import styles from './index.less';
import { Layout, Menu } from 'antd';
import { menus } from './components';

const { Sider, Content } = Layout;

const Personal = (props) => {
  const initMenuObj = 'personalCenter/message';
  const [menuKey, setMenuKey] = useState(props.location.query.path || initMenuObj);

  React.useEffect(() => {
    setMenuKey(props.location.query.path);
  }, [props.location.query.path]);
  const selectMenu = ({ key }) => {
    setMenuKey(key);
  };

  const getCurrentComponents = () => {
    const TComponent = menus[menuKey].components;
    return <TComponent />;
  };

  return (
    <Layout className={styles.personal_container}>
      <Sider className={styles.sider} theme={'dark'} collapsed={false}>
        <Menu
          onSelect={selectMenu}
          selectedKeys={menuKey}
          mode="inline"
          style={{ marginTop: 10, border: 0 }}
        >
          {Object.keys(menus).map((key) => {
            return <Menu.Item key={key}>{menus[key].title}</Menu.Item>;
          })}
        </Menu>
      </Sider>
      <Layout>
        <Content>{getCurrentComponents()}</Content>
      </Layout>
    </Layout>
  );
};

export default Personal;
